import { useState, useEffect } from 'react';

/**
 * 获取示例 JSON 数据的自定义 Hook
 * 注意：不建议在生产环境中使用！
 * 
 * @param {string} url - 要获取数据的 URL
 * @param {number} limit - 可选，限制返回的数据条数
 * @returns {Object} 包含 data 和 loading 状态的对象
 */
export const useFetchJson = (url, limit) => {
    // 状态管理：存储数据和加载状态
    const [data, setData] = useState();
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        const fetchData = async () => {
            setLoading(true);

            try {
                // 发起网络请求获取数据
                const response = await fetch(url);
                const json = await response.json();

                // 如果设置了限制，则只返回指定数量的数据
                const finalData = limit ? json.slice(0, limit) : json;
                setData(finalData);
            } catch (error) {
                console.error('获取数据时发生错误:', error);
                setData([]);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, [url, limit]);

    return { data, loading };
}; 